<template>
  <view class="login-container">
    <!-- 动态背景 -->
    <view class="dynamic-background">
      <view class="gradient-overlay"></view>
      <view class="particle-system">
        <view v-for="(particle, index) in particles" :key="index" class="particle" :style="particle.style"></view>
      </view>
      <view class="geometric-shapes">
        <view class="shape shape-1"></view>
        <view class="shape shape-2"></view>
        <view class="shape shape-3"></view>
        <view class="shape shape-4"></view>
      </view>
    </view>

    <!-- 主要内容区域 -->
    <view class="main-content">
      <!-- 顶部品牌区域 -->
      <view class="brand-section">
        <view class="logo-container">
          <view class="logo-backdrop"></view>
          <u-avatar src="https://mp-f21389fd-f5e1-43fa-9704-63b3616e48c9.cdn.bspapp.com/logo.png" size="100"
            shape="square" bg-color="rgba(255,255,255,0.1)" class="brand-logo" />
          <view class="logo-ring"></view>
        </view>

        <view class="brand-info">
          <view class="brand-tagline">
            <view class="tagline-line"></view>
            <u-text text="智能仓储数字化" size="36" color="rgba(255,255,255,0.7)" />
            <view class="tagline-line"></view>
          </view>
        </view>
      </view>

      <!-- 登录表单 -->
      <view class="login-section">
        <view class="form-container">
          <view class="form-header">
            <view class="header-decoration">
              <view class="deco-line"></view>
              <view class="deco-dot"></view>
              <view class="deco-line"></view>
            </view>
          </view>

          <u-form :model="loginForm" ref="formRef" label-width="0" class="premium-form">
            <!-- 账号输入 -->
            <u-form-item class="form-field" prop="username">
              <view class="field-container">
                <view class="input-group">
                  <view class="input-icon">
                    <u-icon name="account" size="30" color="#4a90e2" />
                  </view>
                  <u-input v-model="loginForm.username" placeholder="请输入账号" :border="false" :custom-style="inputStyle"
                    maxlength="30" class="premium-input" />
                  <view class="input-underline"></view>
                </view>
              </view>
            </u-form-item>

            <!-- 密码输入 -->
            <u-form-item class="form-field" prop="password">
              <view class="field-container">
                <view class="input-group">
                  <view class="input-icon">
                    <u-icon name="lock" size="30" color="#4a90e2" />
                  </view>
                  <u-input v-model="loginForm.password" type="password" placeholder="请输入登录密码" :border="false"
                    :custom-style="inputStyle" maxlength="20" class="premium-input" />
                  <view class="input-underline"></view>
                </view>
              </view>
            </u-form-item>

            <!-- 登录按钮 -->
            <view class="login-action">
              <u-button type="primary" :loading="loading" loading-text="验证中..." :custom-style="buttonStyle"
                class="premium-button" @click="changeLogin">
                <view class="button-content">
                  <view class="button-bg-effect"></view>
                  <u-text text="登录系统" size="30" bold color="#fff" />
                </view>
              </u-button>
            </view>
          </u-form>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { onReady } from '@dcloudio/uni-app'
import { wxloginApi } from '@/apis/login.js'
import store from '@/store/index.js'
// 响应式数据
const loginForm = ref({
  username: 'gzlq',
  password: '123456',
})
const rules = {
  username: [
    {
      required: true,
      message: '请输入账户',
      trigger: 'blur,change',
    },
  ],
  password: [
    {
      required: true,
      message: '请输入密码',
      trigger: 'blur,change',
    },
  ],
}

const loading = ref(false)
const formRef = ref(null)
const particles = ref([])

const changeLogin = () => {
  formRef.value.validate(async (valid) => {
    if (!valid) return
    loading.value = true
    try {
      const res = await wxloginApi(loginForm.value)
      if (!res?.token) throw new Error('无效的 token')
      await store.commit('setToken', res.token)
      await store.dispatch('getUserInfo')
      uni.switchTab({ url: '/pages/index/index' })
    } catch {
      loading.value = false
    }
  })
}

// 样式配置
const inputStyle = {
  backgroundColor: 'transparent',
  fontSize: '16px',
  height: '50px',
  padding: '0',
  color: '#333',
}

const buttonStyle = {
  height: '56px',
  borderRadius: '28px',
  background: 'linear-gradient(135deg, #4a90e2 0%, #357abd 50%, #2c5aa0 100%)',
  border: 'none',
  boxShadow:
    '0 12px 24px rgba(74, 144, 226, 0.4), 0 4px 8px rgba(74, 144, 226, 0.2)',
  position: 'relative',
  overflow: 'hidden',
}

onMounted(() => {
  generateParticles()
})

onReady(() => {
  formRef.value.setRules(rules)
})

const generateParticles = () => {
  for (let i = 0; i < 20; i++) {
    particles.value.push({
      style: {
        left: Math.random() * 100 + '%',
        top: Math.random() * 100 + '%',
        animationDelay: Math.random() * 10 + 's',
        animationDuration: Math.random() * 10 + 10 + 's',
      },
    })
  }
}
</script>

<style lang="scss" scoped>
.login-container {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 140px 40rpx 40rpx;
}

// 动态背景
.dynamic-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;

  .gradient-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg,
        #667eea 0%,
        #764ba2 25%,
        #4a90e2 50%,
        #357abd 75%,
        #2c5aa0 100%);
    animation: gradient-shift 15s ease-in-out infinite;
  }

  .particle-system {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    .particle {
      position: absolute;
      width: 4rpx;
      height: 4rpx;
      background: rgba(255, 255, 255, 0.6);
      border-radius: 50%;
      animation: particle-float linear infinite;
    }
  }

  .geometric-shapes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    .shape {
      position: absolute;
      background: rgba(255, 255, 255, 0.03);
      animation: shape-rotate 20s linear infinite;

      &.shape-1 {
        width: 200rpx;
        height: 200rpx;
        top: 10%;
        right: 10%;
        border-radius: 30%;
        animation-delay: 0s;
      }

      &.shape-2 {
        width: 150rpx;
        height: 150rpx;
        top: 60%;
        left: 5%;
        border-radius: 50%;
        animation-delay: 5s;
      }

      &.shape-3 {
        width: 100rpx;
        height: 100rpx;
        top: 30%;
        left: 20%;
        transform: rotate(45deg);
        animation-delay: 10s;
      }

      &.shape-4 {
        width: 120rpx;
        height: 120rpx;
        bottom: 20%;
        right: 20%;
        border-radius: 20%;
        animation-delay: 15s;
      }
    }
  }
}

@keyframes gradient-shift {

  0%,
  100% {
    filter: hue-rotate(0deg);
  }

  50% {
    filter: hue-rotate(30deg);
  }
}

@keyframes particle-float {
  0% {
    transform: translateY(100vh) rotate(0deg);
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  100% {
    transform: translateY(-100rpx) rotate(360deg);
    opacity: 0;
  }
}

@keyframes shape-rotate {
  0% {
    transform: rotate(0deg) scale(1);
  }

  50% {
    transform: rotate(180deg) scale(1.1);
  }

  100% {
    transform: rotate(360deg) scale(1);
  }
}

// 主要内容
.main-content {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
}

// 品牌区域
.brand-section {
  text-align: center;

  .logo-container {
    position: relative;
    display: inline-block;
    margin-bottom: 50rpx;

    .logo-backdrop {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 140rpx;
      height: 140rpx;
      background: radial-gradient(circle,
          rgba(255, 255, 255, 0.1) 0%,
          transparent 70%);
      border-radius: 50%;
      animation: logo-pulse 4s ease-in-out infinite;
    }

    .brand-logo {
      position: relative;
      z-index: 2;
      border-radius: 24rpx;
      box-shadow: 0 20rpx 40rpx rgba(0, 0, 0, 0.3),
        0 0 0 4rpx rgba(255, 255, 255, 0.1);
    }

    .logo-ring {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 180rpx;
      height: 180rpx;
      border: 2rpx solid rgba(255, 255, 255, 0.2);
      border-radius: 50%;
      animation: ring-rotate 8s linear infinite;

      &::before {
        content: '';
        position: absolute;
        top: -4rpx;
        left: 50%;
        transform: translateX(-50%);
        width: 8rpx;
        height: 8rpx;
        background: #fff;
        border-radius: 50%;
        box-shadow: 0 0 10rpx rgba(255, 255, 255, 0.8);
      }
    }
  }

  .brand-info {
    .brand-tagline {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 40rpx 0;

      .tagline-line {
        width: 60rpx;
        height: 2rpx;
        background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.5),
            transparent);
      }
    }
  }
}

@keyframes logo-pulse {

  0%,
  100% {
    opacity: 0.3;
    transform: translate(-50%, -50%) scale(1);
  }

  50% {
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(1.2);
  }
}

@keyframes ring-rotate {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

// 登录区域
.login-section {
  flex: 1;

  .form-container {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(30px);
    border-radius: 32rpx;
    padding: 60rpx 50rpx;
    box-shadow: 0 32rpx 64rpx rgba(0, 0, 0, 0.15),
      0 0 0 1rpx rgba(255, 255, 255, 0.2);
    border: 1rpx solid rgba(255, 255, 255, 0.3);

    .form-header {
      text-align: center;
      margin-bottom: 60rpx;

      .header-decoration {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 16rpx;
        margin-bottom: 30rpx;

        .deco-line {
          width: 40rpx;
          height: 2rpx;
          background: linear-gradient(90deg, transparent, #4a90e2, transparent);
        }

        .deco-dot {
          width: 8rpx;
          height: 8rpx;
          background: #4a90e2;
          border-radius: 50%;
          box-shadow: 0 0 10rpx rgba(74, 144, 226, 0.5);
        }
      }

      :deep(.u-text:first-of-type) {
        margin-bottom: 12rpx;
      }
    }

    .premium-form {
      .form-field {
        :deep(.u-form-item__body__left__content__label) {
          display: none;
        }

        .field-container {
          .input-group {
            position: relative;
            display: flex;
            align-items: center;
            padding: 20rpx 0;
            border-bottom: 2rpx solid #e8e8e8;
            transition: all 0.3s ease;

            &:focus-within {
              border-bottom-color: #4a90e2;

              .input-underline {
                transform: scaleX(1);
              }

              .input-icon {
                transform: scale(1.1);
              }
            }

            .input-icon {
              margin-right: 20rpx;
              transition: transform 0.3s ease;
            }

            .premium-input {
              flex: 1;
            }

            .input-underline {
              position: absolute;
              bottom: -2rpx;
              left: 0;
              width: 100%;
              height: 2rpx;
              background: linear-gradient(90deg, #4a90e2, #357abd);
              transform: scaleX(0);
              transition: transform 0.3s ease;
            }
          }
        }
      }

      .login-action {
        margin-top: 60rpx;

        .premium-button {
          width: 100%;
          position: relative;
          overflow: hidden;

          .button-content {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 16rpx;
            position: relative;
            z-index: 2;

            .button-bg-effect {
              position: absolute;
              top: 0;
              left: -100%;
              width: 100%;
              height: 100%;
              background: linear-gradient(90deg,
                  transparent,
                  rgba(255, 255, 255, 0.2),
                  transparent);
              animation: button-shine 3s ease-in-out infinite;
            }
          }
        }
      }
    }
  }
}

@keyframes button-shine {
  0% {
    left: -100%;
  }

  50% {
    left: 100%;
  }

  100% {
    left: 100%;
  }
}

// uView组件样式覆盖
:deep(.u-input) {
  background-color: transparent !important;
}

:deep(.u-input__content__field-wrapper__field) {
  font-size: 32rpx !important;
  color: #333 !important;
  font-weight: 500 !important;
}

:deep(.u-button--primary) {
  background: linear-gradient(135deg,
      #4a90e2 0%,
      #357abd 50%,
      #2c5aa0 100%) !important;
  border: none !important;

  &:active {
    transform: translateY(2rpx) scale(0.98) !important;
  }
}
</style>
